<template>
  <el-container class="admin-console">
    <!-- 顶部 -->
    <el-header>
      <div class="topbar">
        <div class="logo">Logo</div>
        <el-dropdown>
          <div class="user-info">
            <el-avatar v-bind:src="userInfo.headerImg" size="small" shape="square"></el-avatar>
            <span class="username">{{ userInfo.loginName }}</span>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="openUserInfo">个人资料</el-dropdown-item>
              <el-dropdown-item @click="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </el-header>

    <!-- 左侧菜单 -->
    <el-container>
      <el-aside width="250px">
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="activeUrl"
            text-color="#fff"
            router
        >
          <el-menu-item index="/">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>控制台</span>
          </el-menu-item>

          <!--      ajax接到我能操作的菜单数据    -->
          <el-sub-menu :index="mt.id+''" v-for="mt in menuTree" :key="mt.id">
            <template #title>
              <e-icon style="color: inherit" :icon-name="mt.menuIcon"/>
              <span style="margin-left: 5px">{{ mt.menuName }}</span>
            </template>
            <el-menu-item :index="item.menuUrl" v-for="item in mt.children" :key="item.id">
              <e-icon style="color: inherit" :icon-name="item.menuIcon"/>
              <span style="margin-left: 5px">{{ item.menuName }}</span>
            </el-menu-item>
          </el-sub-menu>


        </el-menu>
      </el-aside>
      <!-- 内容区域 -->
      <el-main style="height: 100%;">
        <!-- 这里将显示你的内容 -->
        <router-view></router-view>
      </el-main>
    </el-container>


    <!--:close-on-click-modal="false" 禁用点击背景关闭 -->
    <el-dialog v-model="userInfoDialogVisable"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div> 用户名：{{ userInfo.loginName }}</div>
      <div><span>安全邮箱：{{ userInfo.safeEmail }}</span>
        <el-button style="margin-left: 20px">更换邮箱</el-button>
      </div>
      <div> 头像：
        <el-avatar :src="userInfo.headerImg" size="small" shape="square"></el-avatar>
        <el-upload
            class="upload-demo"
            action="http://localhost/api/sys/file/upload"
            multiple
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-change="changeFile"
            :limit="1"
        >
          <el-button style="margin-left: 20px" type="primary">更换头像</el-button>
        </el-upload>

      </div>
    </el-dialog>
  </el-container>
</template>
<!-- http://192.168.200.100:9000/petstore/AKFox_ZH-CN8586782340_1920x1080.jpg -->
<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {getUserInfo, updateUserInfo} from "@/utils/usertoken";
import {updateUserHeaderImgAPI} from "@/api/sys/userapi"
import {getMenuTree} from "@/api/sys/menuapi"
import {logoutAPI} from "@/api/sys/login"
import {computed, onBeforeMount, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRouter} from "vue-router";

const router = useRouter();

//用户信息
const userInfo = ref({});
onMounted(() => {
  let info = getUserInfo();
  userInfo.value = info;
})


//每次获取 activeUrl，都触发一个实时的计算
const activeUrl = computed(() => {
  return location.pathname;
})

//个人资料
const userInfoDialogVisable = ref(false);
const openUserInfo = () => {
  userInfoDialogVisable.value = true;
}

//用户退出
const logout = () => {

  logoutAPI().then(resp => {
    //退出成功，跳转到登录页
    router.push("/login")
  })
}

//================头像


const uploadSuccess = (resp, uploadFile, uploadFiles) => {
  //{code,msg,data}
  // console.log("上传成功，",resp.data)
  //成功后获取到地址。响应式数据修改
  userInfo.value.headerImg = resp.data;


  //ajax发送请求修改用户头像
  updateUserHeaderImgAPI({
    id: userInfo.value.id,
    headerImg: userInfo.value.headerImg
  }).then(resp => {
    if (resp.data.code === 200) {
      ElMessage.success("用户头像更新完成");
      updateUserInfo(userInfo.value);
    }
  });


}

const changeFile = (uploadFile, uploadFiles) => {
  console.log("文件改变", uploadFile)
}


//========= 动态获取所有菜单并展示到左侧===========
const menuTree = ref([]);
onMounted(() => {
  //1、查询到这个用户的所有菜单；(查询所有菜单)
  getMenuTree().then(resp => {
    menuTree.value = resp.data.data
    console.log(menuTree,'haha')
  });
})




</script>

<style scoped>

.admin-console {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  /*overflow: hidden;*/
  overflow-x: hidden;
}

.el-header {
  background-color: #35495e;
  height: 60px;
}

.el-aside {
  height: 100%;
}

.el-menu {
  height: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #35495e;
  color: #fff;
}

.logo {
  font-size: 24px;
}

.user-info {
  display: flex;
  align-items: center;
}

.username {
  color: #fff;
  margin-left: 10px;
}


</style>
